<!--
*****************************************************************************************
 
Made by www.Flashphoner.com, all rights reserved.
These sources can only be used for working with Flashphoner server.
If you want use this to create your own application (separate from Flashphoner server) 
please contact support@flashphoner.com 

*****************************************************************************************
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src='swfobject.js'>
</script>
<script type="text/javascript" src='js/StaticData.js'>
</script>
<script type="text/javascript" src='js/Phone.js'>
</script>
<link rel="stylesheet" type="text/css" href="styles/trackbar.css" />
<script type="text/javascript" src="js/trackbar.js"></script>

<script type="text/javascript">

function trackBarChange(val)
{
}

function positionStatus(e){	
	flashphoner = e.ref;
}

var params = {};
params.menu = "true";
params.swliveconnect = "true";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.wmode = "transparent";
var attributes = {};
var flashvars={}
flashvars.config="flashphoner.xml";
if (swfobject.hasFlashPlayerVersion("10.0.12")) {
	swfobject.embedSWF("jsphone.swf", "jsSWFDiv", "215", "138", "10.0.12", "expressInstall.swf", flashvars, params,attributes,positionStatus);
}
</script>

<title>Phone</title>
<style type="text/css">
	   
  button::-moz-focus-inner, 
  input[type="reset"]::-moz-focus-inner, 
  input[type="button"]::-moz-focus-inner, 
  input[type="submit"]::-moz-focus-inner, 
  input[type="file"] > input[type="button"]::-moz-focus-inner { 
            border: none; 
            }
     
  #jsSWFDiv, #phoneDiv, #loginDiv, #incomingDiv, #connectingDiv, #settingsDiv{
            position: absolute; 
            } 
   	
  #settingsDiv {
            top: 80px;
            left: 5px;
            height: 130px; 
            width: 215px; 
            background: #fff; 
            padding: 0px 0 0 15px;
            font: 12px Arial; 
            visibility: hidden;
            background: url(assets/mic_settings_background.png);
            }
 	
  #jsSWFDiv {
            top: 0px;
            left: 230px;
            }

  #loginDiv {
            top: 75px;
            left: 5px;
            height: 115px; 
            width: 200px; 
            border: 1px solid #ddd; 
            padding: 10px; 
            font: 12px Arial; 
            float: left;
            background: #fff;
            visibility: hidden;
            -moz-opacity: 0.95;
            -khtml-opacity: 0.95;
            opacity: 0.95;
            }
   	
  #phoneDiv { 
            left: 30px;
            height: 240px; 
            width: 147px; 
            background: #fff; 
            padding: 10px;
            position: relative;
            }
   	
  #incomingDiv { 
            left: 50px;
            top: 80px;
            }
   	
  #connectingDiv { 
            top: 50px;    
            left: 10px;
            height: 115px; 
            width: 200px; 
            border: 1px solid #ddd; 
            padding: 10px; 
            font: 12px Arial; 
            float: left;
            background: #fff;
            visibility: hidden;
            -moz-opacity: 0.95; /* Mozilla 1.6 */
            -khtml-opacity: 0.95; /* Konqueror 3.1, Safari 1.1 */
            opacity: 0.95; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
   	            } 
   	
  #loggedUserDiv {
            font: 12px Arial;
            width: 48%; 
            height: 14px;
            float: left;
            text-align: right; 
            }
   	
 .button    {
            background: #dcdcdc;
            width: 46px;
            height: 22px;
            float: left;
            margin: 0px 3px 3px 0; 
            text-align: center;                    
            font: bold 16px Arial;
            line-height: 22px;
            border: 1px outset;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;  
            outline: none;
            }

 .call_button {
            width: 144px; 
            background-color: #009800;
            float: left;
            height: 30px;
            font: 20px Arial;
            color: #fff;
            text-align: center;
            line-height: 30px;
            border: 1px outset;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: default; 
            margin-bottom: 3px;  
            }
    
  .login_link {
            width: 42px;
            height: 14px; 
            font: 12px Arial;
            text-decoration: underline;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: pointer; 
            float: left;
            border: none;
            background: #fff;
            padding: 0;
            color: #bb6666;
            text-align: left;
            }

  .phone_screen {
            width: 144px;
            height: 90px;
            background: #deeeff;
            float: left;
            margin: 3px 0 2px 0;
            font: 22px Arial;
            border: 1px solid #b7babc;
            color: #5a5a5a;
            }             
               
  .login_label {
            float: left; 
            width: 100px; 
            height: 22px; 
            line-height: 22px;                                
            }            
                
  .login_input {
            float: left; 
            width: 100px;
            height: 22px; 
            }                   
   	
  #phoneDiv      {z-index: 1;}
  #loginDiv      {z-index: 2;}
  #incomingDiv   {z-index: 3;}   	
  #connectingDiv {z-index: 4;}
  #jsSWFDiv      {z-index: 5;}   	
  #settingsDiv   {z-index: 6;}

</style>


</head>


<body>

<!-- JS phone -->
<div id="phoneDiv">
      <div style="width: 33%; float: left;"> <input class="login_link" id="loginMainButton" type="submit" value="Log in" onClick="if (getElement('loginMainButton').value == 'Log in'){openLoginView();}else{logoff();}"></div>
      <div style="width: 33%; float: left;" id="loggedUserDiv"></div>
      <div style="width: 33%; float: left;"> <input class="login_link" id="settingsButton" type="submit" value="Mic Settings" onClick="openSettingsView();"></div>
      <input class="phone_screen" type="textarea" id="calleeText" rows="40"> 
      <input class="call_button" id="callButton" type="submit" value="Call" onClick="if (getElement('callButton').value == 'Call'){call();}else{hangup();}" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="1" onclick="getElement('calleeText').value += '1';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="2" onclick="getElement('calleeText').value += '2';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="3" onclick="getElement('calleeText').value += '3';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="4" onclick="getElement('calleeText').value += '4';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="5" onclick="getElement('calleeText').value += '5';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="6" onclick="getElement('calleeText').value += '6';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="7" onclick="getElement('calleeText').value += '7';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="8" onclick="getElement('calleeText').value += '8';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="9" onclick="getElement('calleeText').value += '9';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="*" onclick="getElement('calleeText').value += '*';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="0" onclick="getElement('calleeText').value += '0';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
      <input class="button" type="submit" value="#" onclick="getElement('calleeText').value += '#';" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
</div>
<!-- End of JS phone -->

<!-- Login form -->
<div id="loginDiv">
     <div class="login_label">Username</div>
     <div class="login_input"><input type="text" id="username" value="VKP001" style="width: 100px;"></div>
     <div class="login_label">Password</div>
     <div class="login_input"><input type="text" id="password" value="VKP001" style="width: 100px;"></div>
     <div class="login_label">Server</div>
     <div class="login_input"><input type="text" id="server" value="sipnet.ru" style="width: 100px;"></div>
     <div class="login_label">Port</div>
     <div class="login_input"><input type="text" id="port" value="5060" style="width: 100px;"></div>
     <input class="button" id="loginButton" type="submit" value="Log in" onClick="if (getElement('loginButton').value == 'Log in'){login();}else{logoff();}" style="background: #eee; margin: 7px 70px 0 70px; width: 60px;" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
</div>
<!-- End of login form -->


<!-- Incoming call view -->
<div id="incomingDiv" style="height: 75px; width: 126px; background: #ddd; border: 1px solid #bbb; padding: 5px; font: 12px Arial; visibility:hidden;">
  <div style="float: left; width: 120px; text-align: center; margin-bottom: 10px;">Incoming call</div>
  <div style="float: left; width: 120px; text-align: center; margin-bottom: 10px;" id="callerField"></div>
  <div style="float: left; margin: 2px;"><input id="answerButton" type="submit" value="Answer" onClick="answer();closeIncomingView();" style="width: 58px; background-color: #ddffdd;"></div>
  <div style="float: left; margin: 2px;"><input id="hangupButton" type="submit" value="Hangup" onClick="hangup();closeIncomingView();" style="width: 58px; background-color: #ffdddd;"></div>
</div>
<!-- End of incoming call view -->

<!-- Connecting view -->
<div id="connectingDiv">
  <div id="connectingText" style="float: left; width: 200px; height: 115px; text-align: center; margin-bottom: 0px; text=align: center; line-height: 115px;">Connecting...</div>
</div>
<!-- End of connecting view -->

<div id="jsSWFDiv">
	<a href="http://www.adobe.com/go/getflashplayer">
		<img border="0" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
	</a>
</div>

<!-- Settings view -->
<div id="settingsDiv">
	<input class="button" type="submit" value="X" onclick="closeSettingsView();" style="margin: 3px 0pt 0pt 192px; width: 20px;" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
	<script type="text/javascript">
		trackbar.getObject('micVolume').init({
			onMove : function() {
				micVolume = this.leftValue;	
			},
			dual : false, // two intervals
			width : 150, // px
			leftValue : 100, // unit of value
			rightLimit : 100, // unit of value
			rightValue : 0 // unit of value
		});
	</script>
	<script type="text/javascript">
		trackbar.getObject('speakerVolume').init({
			onMove : function() {
				speakerVolume = this.leftValue;	
			},
			dual : false, // two intervals
			width : 150, // px
			leftValue : 100, // unit of value
			rightLimit : 100, // unit of value
			rightValue : 0 // unit of value
		});
	</script>
	
	<input class="button" type="submit" value="Save" onclick="saveMicSettings();" style="margin: 3px 0 0 75px; width: 50px;" onmousedown="this.style.border='1px inset';" onmouseup="this.style.border='1px outset';" onmouseout="this.style.border='1px outset';">
	
</div>
<!-- End of settings view -->

</body>
</html>